<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>
<!-- 树形模板 -->
<template id="item-template">
    <li class="tree-style">
        <div :class="[{'tree-active':this.model.id==this.$root.active}]" :id="'node'+model.nodeId" @click="toggle(model)" @dblclick="dblclick(model)">
            <!-- 是不是文件夹 -->
            <template v-if="isFolder">
                <!-- 是不是已展开 -->
                <span v-if="!open">
                <Icon type="arrow-right-b"></Icon><Icon type="folder" color="#aee4fa" size="20"></Icon>
                </span>
                <span v-else>
                  <Icon type="arrow-down-b"></Icon><Icon type="folder" color="#aee4fa" size="20"></Icon>
             </span>
            </template>
            <template v-else>
                <Icon type="folder" color="#aee4fa" size="20"></Icon>
            </template>
            <!-- 显示的节点名称 -->
            <span v-text="model.name+'('+model.count+'人)'"></span>
        </div>
        <ul v-show="model.show?model.show:open" v-if="isFolder">
            <item v-for="model in model.subNodes" :model="model">
            </item>
            <!-- <li class="add" @click="addChild">+</li> -->
        </ul>
    </li>
</template>
<script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
<script>
    "use strict";
    Vue.component('item', {
        template: '#item-template',
        props: {
            active: 1,
            model: Object
        },
        data: function () {
            return {
                open: false,
                timer: null
            }
        },
        computed: {
            isFolder: function () {
                return this.model.subNodes &&
                    this.model.subNodes.length
            }
        },
        mounted: function () {
            //  this.$on('item-click', () => {
            //     this.$emit('item-click');
            // });
        },
        methods: {
            //展开事件
            toggle: function (data) {
                $("#nodeding-rightPanle").hide();
                $("#rightPanle").show();
                if (this.isFolder) {
                    this.open = !this.open;
                    if (this.model.show) {
                        this.model.show = !this.model.show;
                    }
                }
                this.$root.active = this.model.id;

                if ($("#nodeding").hasClass("tree-active")) {
                    $("#nodeding").removeClass("tree-active");
                }
                if (!$("#node" + this.model.id).hasClass("tree-active")) {
                    $("#node" + this.model.id).addClass("tree-active");
                }
                // 触发根事件
                this.$root.$emit('item-click', data);
            },
            dblclick: function (data) {
                //触发双击事件
                // this.$root.$emit('item-dblclick', data);
            },
            //改变当前元素类型
            changeType: function () {
                if (!this.isFolder) {
                    Vue.set(this.model, 'children', [])
                    this.addChild()
                    this.open = true
                }
            },
            //添加子元素
            addChild: function () {

            }
        }
    })
    var app=new Vue({
        el:'#app',
        data:{
            active:0,
            treeData:[{
                id:1,
                pid:0
            }]
        }
    });
</script>

</html>